<template>
    <div>
        <el-divider/>
        <el-icon>
            <DocumentChecked/>
        </el-icon>
        <span>窗口收费</span>
        <el-divider/>
        <div style="margin-bottom: 1vw">患者信息查询</div>

        <span>病历号：</span>
        <el-input v-model="patientInfo.caseNumber" placeholder="Please input" style="width: 20vw;margin-right: 2vw"/>
        <span>患者姓名：</span>
        <el-input v-model="patientInfo.realName" placeholder="Please input" style="width: 20vw;margin-right: 2vw"/>
        <el-button type="primary" @click="searchPatient()">搜索</el-button>
        <el-divider/>
        <span>患者信息确认</span>
        <div class="patientInfo">
            <div>
                <span>患者姓名：</span>
                <el-input v-model="patientInfo.realName" placeholder="Please input"
                          style="width: 10vw;margin-right: 2vw" disabled/>
            </div>
            <div>
                <span>身份证号：</span>
                <el-input v-model="patientInfo.cardNumber" placeholder="Please input"
                          style="width: 15vw;margin-right: 2vw" disabled/>
            </div>
            <div>
                <span>年龄：</span>
                <el-input v-model="patientInfo.age" placeholder="Please input" style="width: 10vw;margin-right: 2vw"
                          disabled/>
            </div>
            <div>
                <span>性别：</span>
                <el-input v-model="patientInfo.gender" placeholder="Please input" style="width: 10vw;margin-right: 2vw"
                          disabled/>
            </div>
        </div>
        <el-tag size="large" style="margin-right: 1vw">项目金额：{{ totalPrice }}元</el-tag>
        <el-button type="primary" @click="chargeAll">收费结算</el-button>
        <el-table
                ref="multipleTableRef"
                :data="patientTechList"
                style="width: 100%"
                @select="addTempList"
                @selectAll="addTempList"
        >
            <el-table-column type="selection" width="55"/>
            <el-table-column property="techName" label="项目名称" width="360"/>
            <el-table-column property="techPrice" label="单价"/>
            <el-table-column property="techType" label="类型" show-overflow-tooltip/>
            <el-table-column property="techFormat" label="规格" show-overflow-tooltip/>
            <el-table-column property="creationTime" label="开立时间" width="360"/>
        </el-table>
        <el-divider/>
        <el-tag size="large" style="margin-right: 1vw">药品金额：{{ drugTotalPrice }}元</el-tag>
        <el-button type="primary" @click="chargeDrug">收费结算</el-button>
        <el-table
                ref="multipleTableRef"
                :data="drugInfoList"
                style="width: 100%"
                @select="drugSelect"
                @selectAll="drugSelect"
        >
            <el-table-column type="selection" width="55"/>
            <el-table-column property="drugName" label="项目名称" width="360"/>
            <el-table-column property="drugPrice" label="单价"/>
            <el-table-column property="drugNumber" label="数量"/>
            <el-table-column property="creationDate" label="开立时间" width="360"/>
        </el-table>
    </div>


</template>

<script setup>
import {DocumentChecked} from "@element-plus/icons-vue";
import {computed, provide, ref} from "vue";
import axios from "axios";

// axios.defaults.baseURL = "http://localhost:"
// provide("axios", axios)
const patientInfo = ref({
    caseNumber: '',
    realName: '',
    age: '',
    cardNumber: '',
    gender: ''
})
const drugInfoList = ref([])
//患者带检查的医技项目列表
const patientTechList = ref([])
//项目列表中被选中的项目
const selectedList = ref([])
const drugSelectedList = ref([])
//医技项目总价格
const totalPrice = computed(() => {
    let temp = 0;
    selectedList.value.forEach(tech => {
        temp += parseFloat(tech.techPrice)
    })
    return parseFloat(temp);
})
const drugTotalPrice = computed(() => {
    let temp = 0
    drugSelectedList.value.forEach(drug => {
        temp += (drug.drugNumber * drug.drugPrice)
    })
    return temp
})

//根据患者id和申请状态查询患者检查申请中的医技项目id，申请状态为：已开立，申请包括检查申请，检验申请，处置申请，返回结果是医技项目列表
function queryMedicalList() {
    axios({
        method: 'get',
        url: 'http://localhost:8092/medicalTechnology/queryTechList/' + patientInfo.value.id
    }).then(resp => {
        patientTechList.value = resp.data.data
    })
}

function queryDrugList() {
    axios({
        method: 'get',
        url: 'http://localhost:8091/DrugInfoDto/queryDrugWithPrescriptionId/' + patientInfo.value.id + '/已开立'
    }).then(resp => {
        console.log(resp.data.data)
        drugInfoList.value = resp.data.data
    })
}

//根据条件搜索患者信息
function searchPatient() {
    axios({
        method: 'post',
        url: 'http://localhost:8092/register/queryPatientByNameOrCaseNum',
        data: patientInfo.value
    }).then(resp => {
        if (!resp.data.success) {
            return
        }
        patientInfo.value = resp.data.data
        queryMedicalList()
        queryDrugList()
    })
}

function addTempList(selection) {
    selectedList.value = selection
    console.log(selectedList.value)
}

function chargeAll() {
    let techList = [];
    selectedList.value.forEach(tech => {
        techList.push(tech.id)
    })
    console.log(techList)
    axios({
        method: "post",
        url: 'http://localhost:8092/register/updateReqState/' + patientInfo.value.id,
        data: techList
    }).then(resp => {
        if (resp.data.success) {
            window.alert("缴费成功")
            searchPatient
        }
    })
}

function drugSelect(selection) {
    drugSelectedList.value = selection
    console.log(drugSelectedList.value)
}

function chargeDrug() {
    console.log(drugSelectedList.value)
    let drugIdList = []
    drugSelectedList.value.forEach(drug => {
        drugIdList.push(drug.id)
    })
    console.log(drugIdList)
    console.log(patientInfo.value)
    axios({
        method: 'post',
        url: 'http://localhost:8092/prescription/patientDrugPay/' + patientInfo.value.id,
        data:drugIdList
    }).then(resp => {
        if (resp.data.success) {
            window.alert("缴费成功")
            queryDrugList()
        }
    })
}
</script>

<style scoped>
.patientInfo {
    display: flex;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.patientInfo div {
    display: flex;
}
</style>